<template>
  <div class="map-toggle">
    <img src="/images/vec.jpg" id="vec" @click="isShow(true)" />
    <img src="/images/img.jpg" id="img" @click="isShow(false)" />
  </div>
</template>

<script setup>
import { onMounted, nextTick } from 'vue';
import { storeToRefs } from 'pinia';
import { initMapHook } from '../hooks/initMapHook.js';
import { addDataMap } from '../hooks/addDataMap.js';
import { toggleMap } from '../hooks/toggleMapHook.js';
import { useMap } from '@/stores/useMap.js';

// 获取store
const { map, ggMap } = storeToRefs(useMap());
const { setMap, setggMap } = useMap();

const { initMap } = initMapHook();
const isShow = flag => {
  toggleMap(map.value, flag);
};

// 确保在DOM更新后设置地图实例
onMounted(async () => {
  await nextTick(); // 确保DOM更新完成
  //设置地图实例
  setMap(initMap.value);
  // 加载数据图层
  const ggLayer = addDataMap();
  setggMap(ggLayer);
  initMap.value.addLayer(ggMap.value);

  //  鼠标位置控件
  const mousePositionControl = new ol.control.MousePosition({
    //坐标格式
    coordinateFormat: ol.coordinate.createStringXY(4),
    //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
    projection: 'EPSG:4326',
    //坐标信息显示样式类名，默认是'ol-mouse-position'
    className: 'custom-mouse-position',
    //显示鼠标位置信息的目标容器
    target: document.getElementById('mouse-position'),
    //未定义坐标的标记
    undefinedHTML: '&nbsp;',
  });
  // 实现比例尺控件
  const scaleLineControl = new ol.control.ScaleLine({
    //设置比例尺单位，degrees、imperial、us、nautical、metric
    units: 'metric',
  });

  //添加控件到地图实例
  // initMap.value.addControl(mousePositionControl);
  // initMap.value.addControl(scaleLineControl);
});
</script>

<style lang="scss">
.map-toggle {
  position: fixed;
  bottom: 10px;
  right: 20px;
  width: 280px;
  height: 130px;
  z-index: 2;
  img {
    width: 130px;
    height: 130px;
    border: 1px solid rgba(0, 60, 136, 0.4);
    transition: all 0.3s;
    &:hover {
      border: 3px solid rgba(0, 60, 136, 0.9);
    }
  }
  #vec {
    margin-right: 15px;
  }
}
</style>
